<div id="YyPhoneBNav" class="Yy-d-flex Yy-ju-sb">
    <div data-href="/web/HaiJiaoH5/index/" class="item Yy-d-flex Yy-d-flex-column Yy-flex-cen Yy-ju-sa">
        <img src="/static/CloudImages/帖子/Yy天涯/tarbar/首页.png" alt="Yy">
        <span>首页</span>
    </div>
    <div data-href="/web/HaiJiaoH5/hot_category/"  class="item Yy-d-flex Yy-d-flex-column Yy-flex-cen Yy-ju-sa">
        <img src="/static/CloudImages/帖子/Yy天涯/tarbar/热门分类.png" alt="Yy">
        <span>热门分类</span>
    </div>
    <div data-href="/web/HaiJiaoH5/info/" class="item Yy-d-flex Yy-d-flex-column Yy-flex-cen Yy-ju-sa">
        <img src="/static/CloudImages/帖子/Yy天涯/tarbar/信息.png" alt="Yy">
        <span>信息</span>
    </div>
    <!-- <div data-href="/web/HaiJiaoH5/cart/" class="item Yy-d-flex Yy-d-flex-column Yy-flex-cen Yy-ju-sa">
        <img src="/static/CloudImages/帖子/Yy天涯/tarbar/购物车_.png" alt="Yy">
        <span>购物车</span>
    </div> -->
    <div data-href="/web/HaiJiaoH5/my/" class="item Yy-d-flex Yy-d-flex-column Yy-flex-cen Yy-ju-sa">
        <img src="/static/CloudImages/帖子/Yy天涯/tarbar/我的.png" alt="Yy">
        <span>我的</span>
    </div>
</div>
<style>
    #YyPhoneBNav {
        height: 50px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 999;
        border-top: 1px solid rgba(0, 0, 0, .1);
    }
    #YyPhoneBNav .item {
        width: 20%;
        height: 100%;

    }
    #YyPhoneBNav .item img {
        width: 20px;
        height: 20px;
        border-radius: 8px;
    }
    #YyPhoneBNav .item span {
        font-size: 16px;
    }
</style>

<script>
    let imgs = document.querySelectorAll("#YyPhoneBNav img");
    let spans = document.querySelectorAll("#YyPhoneBNav span");
    let a = document.querySelectorAll("#YyPhoneBNav div");
    const imgs_path = '/static/CloudImages/帖子/Yy天涯/tarbar/'
    const color_red = "red";
    for (let i = 0; i < a.length; i++) {
        a[i].addEventListener('click', () => {
            if (window.location.pathname == a[i].dataset.href) {
                return;
            }else {
                window.location.href = a[i].dataset.href;
            }
            
        })
        
    }
    if (window.location.pathname ==  a[0].dataset.href) {
        imgs[0].src = imgs_path + "首页 (1).png";
        spans[0].style.color=color_red;
    } else if (window.location.pathname ==  a[1].dataset.href) {
        imgs[1].src =imgs_path +  "热门分类 (1).png";
        spans[1].style.color=color_red;
    } else if (window.location.pathname ==  a[2].dataset.href) {
        imgs[2].src = imgs_path + "信息 (1).png";
        spans[2].style.color=color_red;
    } else if (window.location.pathname ==  a[3].dataset.href) {
        imgs[3].src =imgs_path +  "购物车_ (1).png";
        spans[3].style.color=color_red;
    } else if (window.location.pathname ==  a[4].dataset.href) {
        imgs[4].src = imgs_path + "我的 (1).png";
        spans[4].style.color=color_red;
    }
</script>